<template>
  <div>
    <el-main>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="累计专利总量排名" name="year">
          <Companytabs :tableData="tableData" @rankExport="rankExport" @change="change" @getVisit="getVisit"></Companytabs>
        </el-tab-pane>
        <el-tab-pane label="上月新增专利排名" name="month">
          <Companytabs :tableData="tableData" @rankExport="rankExport" @change="change" @getVisit="getVisit"></Companytabs>
        </el-tab-pane>
        <!-- <el-tab-pane label="PCT申请企业名单" name="pct">
          <Pct style="margin-top: 30px;"></Pct>
        </el-tab-pane> -->
      </el-tabs>
    </el-main>
  </div>
</template>

<script>
import { rankList, rankListTwo } from '@/api/newuser'
import { VUE_APP_BASE_API } from '@/config'

import Companytabs from './components/Companytabs.vue';
import Pct from './components/Pct.vue';
export default {
  components: { Companytabs },
  data() {
    return {
      search: '',
      activeName: 'year',
      tableData: {
        list: [],
        date: []
      },
      type: 0,
      street_type: '',
      keywords: '',
      id: ''
    };
  },
  mounted() {
    this.id = this.$store.state.user.id
    this.rankList()
  },
  methods: {
    rankExport() {
      window.open(`${VUE_APP_BASE_API}/v1/company/rank_export?type=${this.type}&street_type=${this.street_type}&keywords=${this.keywords}&id=${this.id}`)
    },
    change(keywords) {
      this.keywords = keywords
      this.rankList()
    },
    getVisit(street_type) {
      this.street_type = street_type
      this.rankList()
    },
    rankList() {
      // rankList({
      //   type: this.type,
      //   street_type: this.street_type,
      //   keywords: this.keywords,
      // }).then(res => {
      //   this.tableData = res
      // })

      rankListTwo({
        street_id: this.street_type,
        status:this.type,
        keywords: this.keywords,
      }).then(res => {
        this.tableData = res
        // console.log(this.tableData);
      })
    },
    handleClick(tab, event) {
      // if(tab.index == 0) {
      //   this.type = 1
      // } else {
      //   this.type = 2
      // }
      this.type = tab.index
      this.rankList()
    }
  },
};
</script>

<style scoped lang="less">
.el-main {
  // height: 696px;
}

::v-deep input {
  border-radius: 30px;
  height: 38px;
  line-height: 38px;
  font-size: 16px;
}

::v-deep .el-input__icon {
  line-height: 38px;
  font-size: 16px;
}

::v-deep .el-tabs__item {
  padding: 0 103px;
  font-size: 16px;
}

.dc_b {
  padding: 7px 40px;
}

.el-main {
  margin-right: 15px;
  border-radius: 5px;
  margin: 25px 30px 0 30px;
}

.table_c {
  margin-top: 15px;
}

::v-deep .has-gutter tr th {
  font-size: 14px;
  font-weight: initial;
  color: #334681;
}

::v-deep .has-gutter tr th:nth-child(11) {
  text-align: center;
}

// :v-deep .has-gutter tr th:last-child {
//   text-align: center;
// }
::v-deep .el-table__row td {
  font-size: 14px;
  color: #334681;

}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
